<template>
	<view>
		<view class="gl-header">
			<view class="gl-header-left">
				<uni-search-bar v-model="search" placeholder="关键字搜索" cancelButton="none"
					@confirm="getSearch"></uni-search-bar>
			</view>
			<view class="gl-header-right">
				<view class="gl-button gl-button-base" hover-class="button-base-hover" :hover-stay-time="100"
					@click="loadDataLevelList">
					<uni-icons type="reload" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">刷新</text>
				</view>
			</view>
		</view>
		<view class="gl-body table-container" :style="{height:swiperH+'px'}">

			<uni-table type="selection" emptyText="暂无更多数据">
				<uni-tr class="table-head">
					<uni-th align="center" width="30">ID</uni-th>
					<uni-th width="44">图标</uni-th>
					<uni-th>名称</uni-th>
					<uni-th>价格</uni-th>
					<uni-th>团队业绩</uni-th>
					<uni-th>抵扣红包</uni-th>
					<uni-th>权益券</uni-th>
					<uni-th>专享折扣</uni-th>
					<uni-th>推荐提成</uni-th>
					<uni-th>董事分红</uni-th>
					<uni-th>消费返点</uni-th>
					<uni-th>销售返点</uni-th>
					<uni-th>上架销售</uni-th>
					<uni-th>操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item,index) in levelData" :key="index">
					<uni-td>{{item.id}}</uni-td>
					<uni-td>
						<image :src="sConf.cos + item.icon" mode="scaleToFill"
							style="width: 40px;height: 40px;border-radius: 50% 50%;"></image>
					</uni-td>
					<uni-td>{{item.name}}</uni-td>
					<uni-td :class="{nodeShow:item.money>0}">{{(item.money/100).toFixed(2)}}</uni-td>
					<uni-td :class="{nodeShow:item.steam>0}">{{(item.steam/100).toFixed(2)}}</uni-td>
					<uni-td :class="{maxShow:item.worth>0}">{{(item.worth/100).toFixed(2)}}</uni-td>
					<uni-td>
						<view v-if="item.sub_content" style="display: flex;gap: 5px;align-items: center;">
							<image :src="sConf.cos + item.sub_content.icon" mode="scaleToFill"
								style="width: 40px;height: 40px;border-radius: 50% 50%;"></image>
							<text>*</text>
							<text class="maxShow">{{item.sub_content.count}}</text>
						</view>
					</uni-td>
					<uni-td :class="{rateShow:item.discount>0}">{{item.discount+'%'}}</uni-td>
					<uni-td :class="{rateShow:item.share_rate>0}">{{item.share_rate+'%'}}</uni-td>
					<uni-td :class="{rateShow:item.draw_rate>0}">{{item.draw_rate+'%'}}</uni-td>
					<uni-td :class="{minShow:item.buyer>0}">{{item.buyer+'‰'}}</uni-td>
					<uni-td :class="{minShow:item.seller>0}">{{item.seller+'‰'}}</uni-td>
					<uni-td>
						<switch :checked="Boolean(item.is_show)" :disabled="true" style="transform:scale(0.7)" />
					</uni-td>
					<uni-td>
						<view style="display: flex;align-items: center;gap: 10px;">
							<view v-if="item.level > 1" class="gl-link gl-link-base" @click="itemChange(item)">编辑
							</view>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="gl-footer"></view>

		<!--模态窗口-->
		<popStaffLevelVue ref="confLevel" @reload="loadDataLevelList"></popStaffLevelVue>
	</view>
</template>

<script>
	import psMethod from '@/common/psMethod';
	import popStaffLevelVue from './pop-staff-level.vue';
	export default {
		data() {
			return {
				swiperH: 0,
				sConf: getApp().globalData,
				search: '',
				levelData: []
			}
		},
		mounted() {
			console.log('页面挂载');
			let window = uni.getWindowInfo();
			this.designLayout(window.windowHeight);
			this.loadDefData()
		},
		components: {
			popStaffLevelVue
		},
		methods: {
			loadDefData() {
				console.log('loadDefData');
				this.loadDataLevelList()
			},
			itemChange(e) {
				console.log('itemChange');
				this.$refs.confLevel.open(e)
			},
			loadDataLevelList() {
				let host = this.sConf.host + '/admin/level/';
				let token = this.sConf.auth.token || '';
				let data = {
					status: 1,
					ordering: 'id'
				}
				psMethod.authenticatorGetSync(host, token, data).then(res => {
					console.log('加载权益配置', res);
					this.levelData = res.resmsg
				})
			},
			getSearch(e) {
				console.log('getSearch', e.value);
			},
			designLayout(wh) {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.gl-body').boundingClientRect();
					query.select('.gl-footer').boundingClientRect();
					query.exec((res) => {
						this.swiperH = wh - Math.ceil(res[0].top) - Math.ceil(res[1].height) - 10;
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.nodeShow {
		color: #007aff;
	}

	.rateShow {
		color: #dd524d;
	}

	.minShow {
		color: #4cd964;
	}

	.maxShow {
		color: #f0ad4e;
	}

	/* 表格垂直滚动 */
	.table-container {
		/* height: 400px; */
		overflow-y: auto;

		::v-deep .uni-table .table-head th {
			font-weight: bold;
			z-index: 2;
			background-color: #fff;
			position: -webkit-sticky;
			position: sticky;
			top: 0;
		}

		::v-deep .uni-table-scroll {
			overflow: visible;
		}
	}
</style>